<template>
  <!-- 菜品分类 -->
  <table border="1px" cellspacing="0">
    <tr align="center">
      <td>编号</td>
      <td>名字</td>
      <td>所属店铺</td>
      <td>操作</td>
    </tr>
    <tr v-for="(item, index) in list" :key="index" align="center">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.shops_name }}</td>
      <td>
        <button @click="del(item.id)">下架</button>
        <button @click="update(item.id)">修改</button>
      </td>
    </tr>
  </table>

  <br /><br />

  <div>
    <van-field v-model="name" label="分类" placeholder="请输入分类名" />
    <van-field v-model="shops_id" label="所属店铺" placeholder="请输入店铺名" />
    <br /><br />
    <van-button type="primary" color="pink" @click="added">上架</van-button>
  </div>

  <div >
    {{upd_good}}
    <van-field v-model="upd_good.id" label="编号" />
    <van-field v-model="upd_good.name" label="分类" placeholder="请输入分类名" />
    <van-field
      v-model="upd_good.shops"
      label="所属店铺"
      placeholder="请输入店铺名"
    />
    <van-button type="primary" color="pink" @click="upd">修改</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      user_id: localStorage.getItem("id"),
      name: "",
      shops_id: "",
      upd_good:{},
    };
  },
  mounted() {},
  methods: {
    // 获取所有的商品分类
    submit: function () {
      this.myaxios(this.weburl + "shops/goods_type/", "get", {
        user_id: this.user_id,
      }).then((data) => {
        console.log("id", this.id);
        console.log(data);
        if (data.code == 200) {
          this.list = data.goods;
          console.log(this.list);
          this.$toast.success(data.msg);
        } else {
          this.$toast.fali(data.msg);
        }
      });
    },
    // 上架
    added: function () {
      this.myaxios(this.weburl + "shops/goods_type/", "post", {
        name: this.name,
        shops_id: this.shops_id,
      })
        .then((data) => {
          console.log("添加的响应", data);
          if (data.code == 200) {
            this.$toast.success(data.msg);
            this.submit();
          } else {
            this.$toast.fail(data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 下架
    del: function (id) {
      var res = confirm("确定是否删除？");

      if (res == true) {
        this.myaxios(this.weburl + "shops/goods_type/" + id, "delete", {
          user_id: this.user_id,
        }).then((data) => {
          if (data.code == 200) {
            console.log("id:", id);
            this.$toast.success(data.msg);
            this.submit();
          } else {
            this.$toast.fail(data.msg);
          }
        });
      }
    },
    // 先获取 在修改
    update: function (id) {
      this.myaxios(this.weburl + "shops/goods_type/" + id, "get", {
        user_id: this.user_id,
      }).then((data) => {
        console.log(data);
        if (data.code == 200) {
          this.upd_good = data.goods;
          console.log(this.goods);
          this.$toast.success(data.msg);
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    upd: function () {
      this.myaxios(this.weburl + "shops/goods_type/", "put", {
        id: this.upd_good.id,
        name: this.upd_good.name,
        user_id: this.user_id,
      }).then((data) => {
        console.log(data);
        if (data.code == 200) {
          this.$toast.success(data.msg);
          this.submit();
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
  },
  created() {
    this.submit();
  },
};
</script>

<style scoped>
</style>